<script setup lang="ts">
import { reactive, onMounted, onBeforeUnmount } from "vue";
import dayjs from 'dayjs';
import type { DateDataType } from "./index.d"
import { useSettingStore } from "@/stores/index"
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'

const dateData = reactive<DateDataType>({
    dateDay: "",
    dateYear: "",
    dateWeek: "",
    timing: null
});

// 天气数据
const weatherData = reactive({
    weather: "", // 天气状况
    temperature: "", // 温度
    city: "庆云县", // 城市
    loading: false
});

const { setSettingShow } = useSettingStore()
const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const timeFn = () => {
    dateData.timing = setInterval(() => {
        dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
        dateData.dateWeek = weekday[dayjs().day()];
    }, 1000);
};
timeFn()

// 获取路由，根据路由获取页面标题
const getRoutePageText = () => {
    const route = useRoute()
    const pageText = route.meta.title
    return pageText
}

// 获取天气信息
const getWeatherInfo = async () => {
    try {
        weatherData.loading = true;
        // 这个配置很重要，必须设置，否则你的 行政服务搜索api无法使用生成回调
        (window as any)._AMapSecurityConfig = {
            securityJsCode: "587b22815e6cc6b14effaa607c627fb7",
        };
        // 加载高德地图API
        const AMap = await AMapLoader.load({
            key: "e6072f86d2d66d78671eaa4542006354", // 需要替换为实际的API密钥
            version: "2.0",
            plugins: ["AMap.Weather"]
        });
        
        // 创建天气查询实例
        const weather = new AMap.Weather();
        
        // 查询实时天气
        weather.getLive(weatherData.city, (err: any, data: any) => {
            if (!err && data && data.info === 'OK') {
                weatherData.weather = data.weather;
                weatherData.temperature = data.temperature + '°C';
            } else {
                console.error('获取天气信息失败:', err);
                weatherData.weather = '晴';
                weatherData.temperature = '--°C';
            }
            weatherData.loading = false;
        });
    } catch (error) {
        console.error('天气API加载失败:', error);
        weatherData.weather = '晴';
        weatherData.temperature = '--°C';
        weatherData.loading = false;
    }
};

// 组件挂载时获取天气信息
onMounted(() => {
    getWeatherInfo();
    // 每30分钟更新一次天气信息
    const weatherTimer = setInterval(getWeatherInfo, 30 * 60 * 1000);
    
    onBeforeUnmount(() => {
        clearInterval(weatherTimer);
    });
});
</script>

<template>
    <div class="d-flex jc-center title_wrap">
        <div class="zuojuxing"></div>
        <div class="youjuxing"></div>
        <div class="guang"></div>
        <div class="d-flex jc-center">
            <div class="title">
                <span class="title-text">锦锂能源数据中心</span> <span v-if="getRoutePageText()" class="title-text-tips"> - {{ getRoutePageText() }}</span>
            </div>
        </div>
        <div class="timers">
            <!-- 天气 -->
            <div class="weather-info">
                <span v-if="!weatherData.loading" class="weather-text">
                    {{ weatherData.city }} {{ weatherData.weather }} {{ weatherData.temperature }}
                </span>
                <span v-else class="weather-loading">获取天气中...</span>
            </div>
            <div class="date-time">
                {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
            </div>

            <div class="setting_icon" @click="setSettingShow(true)">
                <img src="@/assets/img/headers/setting.png" alt="设置">
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.title_wrap {
    height: 60px;
    background-image: url("../assets/img/top.png");
    background-size: cover;
    background-position: center center;
    position: relative;
    margin-bottom: 4px;

    .guang {
        position: absolute;
        bottom: -26px;
        background-image: url("../assets/img/guang.png");
        background-position: 80px center;
        width: 100%;
        height: 56px;
    }

    .zuojuxing,
    .youjuxing {
        position: absolute;
        top: -2px;
        width: 140px;
        height: 6px;
        background-image: url("../assets/img/headers/juxing1.png");
    }

    .zuojuxing {
        left: 11%;
    }

    .youjuxing {
        right: 11%;
        transform: rotate(180deg);
    }

    .timers {
        position: absolute;
        right: 0;
        top: 30px;
        font-size: 18px;
        // display: flex;
        // align-items: center;
        // flex-direction: column;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .weather-info {
            // margin-bottom: 4px;
            font-size: 14px;
            color: #00eaff;
            
            .weather-text {
                background: linear-gradient(92deg, #00ff72 0%, #00ff9f 48.8525390625%, #01ff7a 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            
            .weather-loading {
                color: #999;
                font-size: 12px;
            }
        }
        
        .date-time {
            display: flex;
            align-items: center;
            margin: 0 10px;
        }

        .setting_icon {
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-left: 12px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.title {
    position: relative;
    // width: 500px;
    text-align: center;
    background-size: cover;
    color: transparent;
    height: 60px;
    line-height: 46px;

    .title-text {
        font-size: 38px;
        font-weight: 900;
        letter-spacing: 6px;
        width: 100%;
        background: linear-gradient(92deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .title-text-tips {
        font-size: 38px;
        font-weight: 900;
        letter-spacing: 6px;
        width: 100%;
        background: linear-gradient(92deg,
                #00ff72 0%,
                #00ff9f 48.8525390625%,
                #01ff7a 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
</style>
